<template>
  <div class="data_left07">
    <div class="dataAllBorder01">
      <div class="bzzy_h6">
        <el-tooltip placement="top-start">
          <template #content> 统计规则：<br />对当前地区所属区划的编制数、空编数、以及待分配数进行全局展示,与平均值进行对比</template>
          <span>各地编制使用情况展示</span></el-tooltip
        >
      </div>
      <!--TAB切换-->
	  <div class="btngroup">
	    <button
	      id="save"
	      @click.prevent="changePie(0)"
	      :class="classNum == 0 ? 'add tabpress' : null"
	    >
	      行政编制
	    </button>
	    <button
	      @click.prevent="changePie(1)"
	      :class="classNum == 1 ? 'add tabpress' : null"
	      id="snap"
	    >
	      政法编制
	    </button>
	    <button
	      @click.prevent="changePie(2)"
	      :class="classNum == 2 ? 'add tabpress' : null"
	      id="snap"
	    >
	      事业编制
	    </button>
	  </div>
      <div
        id="gdbzqkzs"
        style="width: 98%; height: calc(100% - 40px); float: left"
      ></div>
    </div>
   
  </div>
</template>
<script>
var myChart;
import Sever from "@/api/selfApi.js";
export default {
  props: ["selectCode"],
  name: "Gdbzqkzs",
  data() {
    return {
		classNum: 0,
      desp: [],
     dzqBzData: [],
	 zfBzData: [],
	 syBzData: [],
	 kbsDzqData: [],
	 kbsZfData: [],
	 kbsSyData: [],
	dzqDfpData: [],
	zfDfpData: [],
	syDfpData: [],
      VALUE: [100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400],
      option: {
  backgroundColor: '#03213D',
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '4%',
    top: '7%',
    bottom: '12%',
    right: '8%',
    containLabel: true,
	width:1450
  },
  legend: { 
     right: 10,
    top: 12,
    textStyle: {
      color: '#fff'
    },
    itemWidth: 12,
    itemHeight: 10,
    // itemGap: 35
  },
  xAxis: {
    type: 'category',
    data: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8'],
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#BDD8FB',
        width: 1 // 这里是为了突出显示加上的
      }
    },
    axisLabel: {
		interval: 0,
      textStyle: {
        color: '#BDD8FB',
        fontSize: 12
      },
	 
    }
  },

  yAxis: {
    type: 'value',
   
    axisLine: {
      show: false,
      lineStyle: {
        color: 'white'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.15)'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#BDD8FB'
      }
    }
  },
  // dataZoom: [{
  //   show: true,
  //   height: 2,
  //   xAxisIndex: [
  //     0
  //   ],
  //   bottom: '8%',
  //   start: 0,
  //   end: 20,
  //   handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
  //   handleSize: '110%',
  //   handleStyle: {
  //     color: '#d3dee5'

  //   },
  //   textStyle: {
  //     color: '#fff'
  //   },
  //   borderColor: '#90979c'
  // }, {
  //   type: 'inside',
  //   show: true,
  //   height: 15,
  //   start: 0,
  //   end: 20
  // }],
  series: [{
    name: '编制数',
    type: 'bar',
    barWidth: '10%',
    itemStyle: {
      normal: {
        color: {
	      type: 'linear',
	      x: 0,
	      y: 0,
	      x2: 0,
	      y2: 1,
	      colorStops: [
	        {
	          offset: 0,
	          color: '#F761A1' // 0%处的颜色
	        },
	        {
	          offset: 1,
	          color: '#8C1BAB' // 100%处的颜色
	        }
	      ],
	      global: false
	    },
        barBorderRadius: 12
      }
    },
    data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
  },
  {
    name: '空编数',
    type: 'bar',
    barWidth: '15%',
    itemStyle: {
      normal: {
       color: {
	      type: 'linear',
	      x: 0,
	      y: 0,
	      x2: 0,
	      y2: 1,
	      colorStops: [
	        {
	          offset: 0,
	          color: '#90F7EC' // 0%处的颜色
	        },
	        {
	          offset: 1,
	          color: '#32CCBC' // 100%处的颜色
	        }
	      ],
	      global: false
	    },
        barBorderRadius: 11
      }

    },
    data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
  },
  {
    name: '待分配数',
    type: 'bar',
    barWidth: '15%',
    itemStyle: {
      normal: {
       color:  {
	      type: 'linear',
	      x: 0,
	      y: 0,
	      x2: 0,
	      y2: 1,
	      colorStops: [
	        {
	          offset: 0,
	          color: '#FCCF31' // 0%处的颜色
	        },
	        {
	          offset: 1,
	          color: '#F55555' // 100%处的颜色
	        }
	      ],
	      global: false
	    },
        barBorderRadius: 11
      }
    },
    data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
  }]
},
    };
  },
  components: {
    Sever,
  },
  watch: {
    selectCode(newV) {
      this.refreshData();
    },
  },
  methods: {
	  saveImageToBackend() {
	        // 将 echarts 图表转换为图片
	        const base64Data = myChart.getDataURL({
	          pixelRatio: 2,
	        });
	        
	        // 构建请求体数据
	        const requestData = {
	          image: base64Data,
	          depCode:this.selectCode,
			  name:this.selectCode+"1"+".png"
	        };
			
		
	        
	        Sever.smz
	            .getSaveImage(requestData)
	            .then((res) => {
	            
	            })
	            .catch((err) => {
	              console.log(err);
	            });
	        
	      },
	 changePie(num) {
	   this.classNum = num;
	   this.initEcharts();
	 },
	averageNumber(arr) {
	       const sum = arr.reduce((acc, cur) => acc + cur, 0);
	       const average = sum / arr.length;
	       return Math.round(average); // 对平均数进行四舍五入处理
	     },
    async refreshData() {
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = this.$echarts.init(document.getElementById("gdbzqkzs"));
      myChart.clear();
      myChart.showLoading("default", {
        text: "正在加载，请稍候...",
        color: "#c23531",
        textColor: "rgba(255, 255, 255, 0.5)",
        maskColor: "#00000000",
        zlevel: 0,
      });
	   
      await Sever.smz
        .getGdbzqkzs({ depCode: this.selectCode })
        .then((res) => {
          if (res.code == 1) {
            console.log(res.data);
            let data = res.data;
            this.desp= [];
            this.dzqBzData= [];
            this.zfBzData= [];
            this.syBzData= [];
            this.kbsDzqData= [];
            this.kbsZfData= [];
            this.kbsSyData= [];
            this.dzqDfpData= [];
            this.zfDfpData= [];
            this.syDfpData= [];
            for (let index = 0; index < data.length; index++) {
              this.desp.push(data[index].desp);
              this.dzqBzData.push(data[index].dzqBz);
              this.zfBzData.push(data[index].zfBz);
			  this.syBzData.push(data[index].syBz);
			  this.kbsDzqData.push(data[index].kbsDzq);
			  this.kbsZfData.push(data[index].kbsZf);
			  this.kbsSyData.push(data[index].kbsSy);
			  this.dzqDfpData.push(data[index].dzqDfp);
			  this.zfDfpData.push(data[index].zfDfp);
			  this.syDfpData.push(data[index].syDfp);
            }
			 this.desp.push("平均值");
			 this.dzqBzData.push(this.averageNumber(this.dzqBzData));
			 this.zfBzData.push(this.averageNumber(this.zfBzData));
			 this.syBzData.push(this.averageNumber(this.syBzData));
			 this.kbsDzqData.push(this.averageNumber(this.kbsDzqData));
			 this.kbsZfData.push(this.averageNumber(this.kbsZfData));
			 this.kbsSyData.push(this.averageNumber(this.kbsSyData));
			 this.dzqDfpData.push(this.averageNumber(this.dzqDfpData));
			 this.zfDfpData.push(this.averageNumber(this.zfDfpData));
			 this.syDfpData.push(this.averageNumber(this.syDfpData));

            this.initEcharts();
          } else {
            console.log("接口请求错误！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    initEcharts() {
      myChart.hideLoading();
	 
	  if (this.classNum == 0) {
      this.option.xAxis.data=this.desp;
      this.option.series[0].data=this.dzqBzData;
	   this.option.series[1].data=this.kbsDzqData;
	this.option.series[2].data=this.dzqDfpData;

	}else if(this.classNum == 1) {
      this.option.xAxis.data=this.desp;
      this.option.series[0].data=this.zfBzData;
	   this.option.series[1].data=this.kbsZfData;
	this.option.series[2].data=this.zfDfpData;

	}else if(this.classNum == 2) {
      this.option.xAxis.data=this.desp;
      this.option.series[0].data=this.syBzData;
	   this.option.series[1].data=this.kbsSyData;
	this.option.series[2].data=this.syDfpData;

	}
      this.option && myChart.setOption(this.option);
      // 重置option属性
      this.option = this.$options.data.call(this).option;

  

      // 响应式变化
      window.addEventListener("resize", () => myChart.resize(), false);
    },
  },
  mounted() {
    this.refreshData();
  },
};
</script>